<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>罗技官方商城</title>
    <link rel="stylesheet" href="../static/libs/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../static/libs/css/reset.css">
    <link rel="stylesheet" href="../static/libs/css/Site.css">
    <link rel="stylesheet" href="../static/libs/css/tool.css">
    <link rel="stylesheet" href="../static/libs/css/commect.css">
    <link rel="stylesheet" href="../dist/css/index.css">
    <link rel="stylesheet" href="../static/libs/css/news.css">
    <link rel="stylesheet" href="../static/libs/css/productList.css">
    <link rel="stylesheet" href="../static/libs/css/Page.css">
    <script src="./javascripts/index.js"></script>
</head>

<body class="skin-blue sidebar-mini" style="font-size: 12px;">
    <div class="navbar navbar-fixed-top">
        <style>
            .coupon {
                width: 180px;
                height: 60px;
                margin-left: 0px;
                margin-right: 10px;
                margin-top: -3px;
                float: left;
                display: inline;
            }
            
            #logout {
                position: absolute;
                left: 220px;
                top: 0;
                display: none;
            }
            
            .userinfo {
                color: #ec0a0a;
            }
        </style>
        <header class="header-box">
            <aside class="top-bar">
                <div class="container">
                    <div class="welcome-div">

                        <span><em class="userinfo"></em> 您好,欢迎来到罗技官方商城&nbsp;&nbsp;&nbsp;</span>

                        <a href="./login.html" id="btnlogin">请登录</a><span id="gang">&nbsp;|&nbsp;</span>
                        <a href="./Registration.html" id="btnregistered">注册</a>
                        <a href="javascript:void(0)" id="logout">[ 注销登录 ]</a>
                    </div>
                    <div class="right-tool">
                        <a class="user-a" href="#"><i class="icon-account"></i>我的账户</a>
                        <span class="f-l">|</span>
                        <div class="user-cart">
                            <a class="user-a" href="./gouwuche.html" target="_blank">
                                <i class="icon-cart">
                            <em class="number" id="txtTopNumber">0</em>
                        </i>购物车
                            </a>
                        </div>

                        <span class="phone" style="font-size: 20px;"><i style="margin-top: -5px;"></i>售前4006260228</span>
                        <span class="phone" style="font-size: 20px;"><i style="margin-top: -5px;"></i>售后4006137015</span>
                    </div>
                </div>
            </aside>
            <div class="container header-wrap">
                <a class="logo" style="margin-right: 0px; margin-left: 5px; width: 315px;" href="./logitech.html"></a>
                <a title="新品礼包" class="coupon" href="#">
                    <img src="https://images.wincheers.net/UpLoad/Web/ProductImg/2020-11-19/NEW_XM/xq.gif" />

                </a>
                <div class="header-search" id="topSearchul">
                    <div class="search-box" id="topSearch">
                        <input placeholder="G923游戏方向盘" type="text" id="txtKeyName" autocomplete="off" style="width:370px" />
                        <a class="search-sure" href="javascript:void(0);" id="btnSearch"></a>
                    </div>
                    <div id="list">

                    </div>
                    <div class="search-down" id="search-downul">
                        <ul id="messageul"></ul>
                    </div>
                    <p class="meat">
                        热门搜索:
                        <a href="#" target="_blank"> PRO X无线游戏耳机</a>
                        <a href="#" target="_blank">M575轨迹球鼠标</a>
                        <a href="#" target="_blank">G102二代</a>
                    </p>
                </div>
                <a href="#" class="header-banner" title="gpw粉">
                    <img src="https://images.wincheers.net/UpLoad/Web/ProductImg/2020-06-29/NEW_XM/视频办公(1).gif" />
                </a>
            </div>
        </header>

        <nav class="nav-box">
            <div class="container">
                <ul id="Nav" class="nav clearfix">
                    <li class="classify">
                        <a class="first-a" href="#">全部产品分类</a>
                        <div class="classify-nav" style="display: none;">
                            <dl>
                                <dt>
                                    <a href="#" target="_blank">
                                            <i class="icon-classify-03"></i>音乐类                                    </a>
                            </dt>
                                <dd>
                                    <a href="#" target="_blank">Blue麦克风</a>
                                    <a href="#" target="_blank">蓝牙音箱</a>
                                    <a href="#" target="_blank">入耳式耳机</a>
                                </dd>
                                <dt>
                                    <a href="#" target="_blank">
                                            <i class="icon-classify-04"></i>平板电脑周边                                    </a>
                            </dt>
                                <dd>
                                    <a href="#" target="_blank">平板电脑周边</a>
                                </dd>
                                <dt>
                                    <a href="#" target="_blank">
                                            <i class="icon-classify-02"></i>游戏类                                    </a>
                            </dt>
                                <dd>
                                    <a href="#" target="_blank">游戏鼠标</a>
                                    <a href="#" target="_blank">游戏鼠标垫</a>
                                    <a href="#" target="_blank">游戏耳机麦克风</a>
                                    <a href="#" target="_blank">方向盘</a>
                                    <a href="#" target="_blank">罗技G飞行模拟器</a>
                                    <a href="#" target="_blank">游戏键盘</a>
                                </dd>
                                <dt>
                                    <a href="#" target="_blank">
                                            <i class="icon-classify-01"></i>个人电脑周边</a>
                            </dt>
                                <dd>
                                    <a href="#" target="_blank">电脑耳机麦克风</a>
                                    <a href="#" target="_blank">有线键盘</a>
                                    <a href="#" target="_blank">摄像头</a>
                                    <a href="#" target="_blank">无线键鼠套装</a>
                                    <a href="#" target="_blank">演示器</a>
                                    <a href="#" target="_blank">摄像头配件</a>
                                    <a href="#" target="_blank">蓝牙鼠标</a>
                                    <a href="#" target="_blank">激光鼠标</a>
                                    <a href="#" target="_blank">无线鼠标</a>
                                    <a href="#" target="_blank">有线键鼠套装</a>
                                    <a href="#" target="_blank">有线鼠标</a>
                                    <a href="#" target="_blank">无线键盘</a>
                                </dd>
                            </dl>
                        </div>
                    </li>
                    <li><a class='first-a' href="#" id="0">会员福利</a></li>
                    <li><a class='first-a' href="#" id="1">新品专区</a><em class="hot-bg"></em></li>
                    <li><a class='first-a' href="#" id="0">配件专区</a></li>
                    <li><a class='first-a' href="#" id="0">会议专区</a></li>
                    <li><a class='first-a' href="#" id="1">企业采购</a><em class="hot-bg"></em></li>
                    <li><a class='first-a' href="#" id="0">关于罗技</a></li>
                </ul>
            </div>
        </nav>

        <section>
            <aside class="crumb-box">
                <div class="container">
                    您现在的位置：<a href="./logitech.html">罗技官方商城</a>&nbsp;&gt;&nbsp;<a href="./productDetails.html">所有产品</a>&nbsp;&gt;&nbsp;
                    <a href="javacsript:void(0)" id="OnSearchkey"></a>
                </div>
            </aside>


            <div class="container">
                <div class="productList-box clearfix">
                    <div class="productList-right">
                        <!--搜索 start-->
                        <div class="productList-search-box">
                            <div class="productList-search-title">
                                <a name="goThere"></a>
                                <span class="span-text"><a href="javascript:void(0);">全部分类</a>&nbsp;&gt;&nbsp;<a href="javacsript:void(0)" id="Searchkey">热销单品</a>&nbsp;&gt;&nbsp;</span>

                            </div>
                            <ul class="list-ul">
                                <li class="list">
                                </li>
                                <li class="list last">
                                    <label class="label-text">价&nbsp;&nbsp;格：</label>
                                    <div class="div-text">
                                        <a id="lbtn_Price" name="0" class="active">全部</a>
                                        <a id="lbtn_Price0 " name="0,99 ">0-99</a>
                                        <a id="lbtn_Price1" name="100,299">100-299</a>
                                        <a id="lbtn_Price2 " name="300,399 ">300-399</a>
                                        <a id="lbtn_Price3" name="400,799">400-799</a>
                                        <a id="lbtn_Price4 " name="800 ">800以上</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!--搜索 end-->
                        <!--排序 start-->
                        <div class="product-sort-box">
                            <div class="sort-left">
                                <a id="lbtn_active" name="No" class="sort-a" onclick="Sort_Click(this)">默认</a>
                                <a id="lbtn_SalesVolume" class="sort-a" name="SortHot" onclick="Sort_Click(this)">销量<i></i></a>
                                <a id="lbtn_SortPrice" class="sort-a" name="SortPrice" va="Price asc" onclick="Sort_Click(this)">价格<i></i></a>
                                <span class="have-goods">
                                    <label>
                                        <input type="checkbox" onclick="chkISQty(this)" id="check">不显示售完商品
                                    </label>
                                </span>
                            </div>
                            <div class="sort-right">
                                <span class="number">共显示<em id="ProdcutNumberShow">922</em>件商品</span>
                            </div>
                        </div>
                        <!--排序 end-->
                        <!--产品list start-->

                        <div class="productList-list-box">
                            <div id="divpage">
                                <ul class="productList-list-ul clearfix">

                                </ul>
                            </div>
                        </div>
                        <!--分页 start-->
                        <div id="kkpager" class="page-box">
                            <div id="J_bottomPage" class="p-wrap">
                                <ul class="pagination">
                                </ul>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </section>
    </div>
    <nav id="online-service">
        <ul class="online-ul">
            <li class="items item">
                <div class="item-icon">
                    <img src="../static/libs/images/icon-online-01.png">
                </div>
                <p class="text">售前咨询</p>
                <div class="bg"></div>
                <div class="detail detail-01" style="display: none;">
                    <div class="detail-item">
                        <div class="name">
                            <!-- 在线客服图标:默认图标结束-->

                            <a id="YSF-BTN-HOLDERS" href="javascript:;">
                                <img src="../static/libs/images/icon-online-06.png"> 在线咨询
                            </a>

                        </div>
                        <p class="time">周一至周日: 9:00-18:00</p>
                    </div>
                    <div class="detail-item">
                        <p class="hotline">热线电话</p>
                        <p class="phone">400-6260-228</p>
                        <p class="time">周一至周五: 9:00-18:00</p>
                    </div>
                    <div class="detail-item detail-item-03">
                        <p class="hotline">采购专线</p>
                        <p class="phone">021-60716960</p>
                        <p class="time">周一至周五: 9:00-18:00</p>
                    </div>

                </div>
            </li>
            <li class="items item">
                <div class="item-icon">
                    <img src="../static/libs/images/icon-online-02.png">
                </div>
                <p class="text">售后咨询</p>
                <div class="bg"></div>
                <div class="detail details" style="height: 156px; display: none;">

                    <div class="list">
                        <p class="text1">全国售后</p>
                        <p class="text2">4006137015</p>
                    </div>

                    <a class="after-sales" href="#" target="_blank">点击查看售后网点&gt;&gt;</a>
                </div>
            </li>
            <li class="items item">
                <div class="item-icon">
                    <img src="../static/libs/images/icon-online-03.png">
                </div>
                <p class="text">官方微信</p>
                <div class="bg"></div>
                <div class="detail detail-1" style="display: none;">
                    <div>
                        <img src="../static/libs/images/logweixin.png" alt="">
                    </div>
                    <p class="mall">官方微信</p>
                </div>
            </li>
            <li class="item" onclick="goTop()">
                <div class="item-icon">
                    <img src="../static/libs/images/icon-online-04.png">
                </div>
                <p class="text">TOP</p>
            </li>
        </ul>
    </nav>
    <script src="../static/libs/javascripts/animate.js"></script>
    <script src="./javascripts/index.js"></script>

    <footer class="footer-box">
        <aside class="footer-wrap">
            <div class="container servers-box">
                <span><i class="servers-01"></i>快递送货 产品直达</span><span><i class="servers-02"></i>独家优惠 丰富活动</span>
                <span>
                    <i class="servers-03"></i>
                    官方网购 正品保证
                </span>
                <span>
                    <i class="servers-04"></i>
                    多种类型 方便支付
                </span>
                <span>
                    <i class="servers-05"></i>
                    所有产品 均有售后
                </span>
            </div>
        </aside>
        <aside class="footer-wrap">
            <div class="container help-box">
                <dl class="help-dl">
                    <dt>|&nbsp;新手指南</dt>
                    <dd><a href="#" target="_blank">如何注册</a></dd>
                    <dd><a href="#" target="_blank">购买流程</a></dd>
                    <dd><a href="#" target="_blank">积分政策</a></dd>
                </dl>
                <dl class="help-dl">
                    <dt>|&nbsp;支付方式</dt>
                    <dd><a href="#" target="_blank">银行汇款</a></dd>
                    <dd><a href="#" target="_blank">发票问题</a></dd>
                    <dd><a href="#" target="_blank">在线支付</a></dd>
                </dl>
                <dl class="help-dl">
                    <dt>|&nbsp;配送方式</dt>
                    <dd><a href="#" target="_blank">配送范围及运费</a></dd>

                    <dd><a href="#" target="_blank">圆通配送</a></dd>
                </dl>
                <dl class="help-dl">
                    <dt>|&nbsp;售后服务</dt>
                    <dd><a href="#" target="_blank">罗技售后网点</a></dd>

                    <dd><a href="#" target="_blank">售后服务承诺</a></dd>
                    <dd><a href="#" target="_blank">退款说明</a></dd>
                </dl>
                <dl class="help-dl">
                    <dt>|&nbsp;罗技官方网站</dt>
                    <dd><a href="#" target="_blank">常见问题</a></dd>
                    <dd><a href="#" target="_blank">技术支持</a></dd>
                    <dd><a href="#" target="_blank">交易条款</a></dd>
                </dl>
                <div class="help-contact">

                    <p class="p1">在线客服</p>
                    </a>
                    <p class="p1">4006260228</p>
                    <p class="p2">周一至周五: 9:00-18:00</p>

                </div>
            </div>
        </aside>
        <aside>
            <div class="container copyright">
                <p>罗技官方商城由罗技（中国）科技有限公司授权双齐国际贸易（上海）有限公司负责经营 2021 , all rights reserved</p>
                <p>
                    <a style="color: #7f7f7f;" href="#" target="_blank">罗技官方网站</a>
                    <a style="color: #7f7f7f;" href="#" target="_blank">联系方式</a>
                    <a style="color: #7f7f7f;" href="#" target="_blank">隐私声明</a>
                    <a style="color: #7f7f7f;" href="#" target="_blank">用户服务协议</a>

                    <a style="color: #7f7f7f;" href="#" target="_blank">沪ICP备12002604号-1</a>
                </p>
            </div>
            <div class="container copyright" style="text-align: center; padding: 0px 0px 0px 0px">
                <a id="imgurl" href="#" title="电子营业执照" target="_blank"><img src="../static/libs/images/lz4.png" style="width: 1%;height: auto;margin-right: 2px;" width="62" height="62" border="0"></a>
                <span id="cnzz_stat_icon_1254611721"><a href="#" target="_blank" title="站长统计"><img border="0" hspace="0" vspace="0" src="../static/libs/images/pic.gif"></a></span>
            </div>
        </aside>
    </footer>
    </span>

</body>

<script src="../static/libs/javascripts/jquery-1.11.1.min.js"></script>
<script src="../static/libs/javascripts/cookie.js"></script>
<script src="../static/libs/javascripts/jQuery.js"></script>
<script src="../static/libs/javascripts/jquery.lazyload.js"></script>
<script src="../static/libs/javascripts/ajax-promise.js"></script>
<script src="../static/libs/javascripts/jquery.pagination.js"></script>
<script src="../static/libs/javascripts/ajax.js"></script>
<script src="./javascripts/index.js"></script>
<script src="./javascripts/getuser.js"></script>
<script>
    Getuser();
</script>

<script>
    var productList_list_ul = document.querySelector(".productList-list-ul");
    var pagination = document.querySelector("pagination");
    var token = getCookie("token");
    window.onload = async function() {

        let res = await ajax_promise({
                url: "http://127.0.0.1:8888/goods/list",
                data: {
                    current: 1,
                    pagesize: 16
                },
            })
            // 处理数据; 
        res = JSON.parse(res);
        // 让功能函数(自己写的函数)完成页面渲染; 
        renderPage(res);
        renderBullets(res);

    }


    function renderPage(res) {
        productList_list_ul.innerHTML = res.list.map(item => `<li class="list">
                    <div class="list-box">
            <p class="p-img">
                <a href="./Details.html#id=${item.goods_id}" >
                    <img src="${ item.img_big_logo }" alt=""></a></p>
                    <p class="p-name">
                        <a href="./Details.html#id=${item.goods_id}" title="">${ item.title }</a>
                        </p>
                        <p class="p-price-comment">
                            <span class="price">商城价<strong><em>￥</em>${ item.price }</strong></span>
                            <span class="comment">0 评价</span>
                            </p>
                            <p class="p-tool" id="#">
                                <a class="p-tool-btn no" data-id="${item.goods_id}">加入购物车</a>
                                </p>
                                
                                </div>
                                </li>`).join("");
    }

    function renderBullets(res) {

        $(".pagination").pagination({
            pageCount: res.total,
            callback: async function(instance) {
                // 自己写一下; 
                let res = await ajax_promise({
                    url: "http://127.0.0.1:8888/goods/list",
                    data: {
                        current: instance.getCurrent(),
                        pagesize: 16
                    },
                })
                res = JSON.parse(res);
                renderPage(res);
            }
        });
    }


    $("#divpage").on("click", ".p-tool-btn", handlerAddCart)
        // console.log(1);
        // 增加购物车功能 ; 
    function handlerAddCart() {
        // console.log(1)
        // 1. 获取用户 id ; 
        var user_id = getCookie("userid");
        // 2. 获取商品 id ; 
        var goods_id = $(this).attr("data-id");
        // 使用ajax工具发起请求 : 

        // 注意 : 我们发送加入购物车请求的时候，把数据放在params 里面不放在body里面
        var options = {
            url: `http://127.0.0.1:8888/cart/add?id=${user_id}&goodsId=${goods_id}`,
            type: "post",
            data: {
                id: user_id,
                goodsId: goods_id
            },
            headers: {
                authorization: token
            }
        }

        $.ajax(options)
            .done(function(data) {
                // console.log( data );
                handlerAjax(data);
            });
    }

    function handlerAjax(data) {
        switch (data.code) {
            case 1:
                alert(data.message);
                break;
            case 401:
                alert("抱歉您还没有登录，请登录后再去加入购物车");
                location.href = "./login.html";
                break;
        }
    }
</script>
<!-- 模糊搜索 -->
<script>
    var ipt = document.getElementById("txtKeyName")

    ipt.oninput = function() {
        var script = document.createElement("script");
        let url = "https://suggest.taobao.com/sug?";
        url += "code=utf-8";
        url += "&q=" + ipt.value;
        url += "&area=c2c";
        url += "&bucketid=atb_search";
        url += "&callback=callback";

        script.src = url;
        document.body.appendChild(script);
        script.onload = function() {
            script.remove();
        }
    }
    var list = document.getElementById("list");

    function callback(data) {
        console.log(data);
        // 判定一下data里面是否查询到了数据，如果查询到了数据再去渲染， 如果没有查询到数据就直接清空元素内部内容; 
        if (!data.result) {
            return list.innerHTML = ""
        }

        // 渲染页面; 
        list.innerHTML = data.result.map(index => `<div class="goods">${index[0]}</div>`).join("");
    }
</script>



</html>